<template>
	<div class="photoAlbum">
		<div class="alubms">
			<div class="slider-for" :style="{left: (0-CarouseIndex * CarouselImgWidth) + 'px'}">
				<div class="slide-for-each" v-for="(vm,index) in photoList">
					<img class="slick-for-img maxWidth" :id="id+'slideImg'+index" :src="vm" @mouseenter="drag(id+'slideImg'+index)">
				</div>
			</div>
			<i class="zoomBtn fa-rotate-right fa zoomBtnRatate" @click="imgRotate(id+'slideImg'+CarouseIndex)"></i>
			<i class="zoomBtn zoomBtnMax fa-search-plus fa" @click="imgZoomMax(id+'slideImg'+CarouseIndex)"></i>
			<i class="zoomBtn fa-search-minus fa" @click="imgZoom(id+'slideImg'+CarouseIndex)"></i>
			<div class="navContent">
				<div class="before">
					<i class="el-icon-arrow-left" @click="CarouseIndex = (CarouseIndex>0?CarouseIndex-1:0)"></i>
				</div>
				<div class="navSlider">
					<div class="slider-nav" :style="{left: (0-(CarouseIndex>navHalfNum?((navAllNum-CarouseIndex < navHalfNum) ? (navAllNum-navHalfNum*2) : (CarouseIndex-navHalfNum)):0) * CarouselThumbImgWidth) + 'px'}">
						<div class="slider-nav-each" v-for="(vm,index) in photoThumbList">
							<img :class="{active:index==CarouseIndex}" class="slider-nav-img" :src="vm" @click="changeSlider(index)">
						</div>
					</div>
				</div>
				<div class="before after">
					<i class="el-icon-arrow-right" @click="CarouseIndex = (CarouseIndex<photoThumbList.length-1?(CarouseIndex + 1):(photoThumbList.length-1))"></i>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'photoAlbum',
	data() {
		return {
			id: 'a',
			CarouseIndex: 0,
			CarouselImgWidth: 0,
			CarouselThumbImgWidth: 0,
			nowImgZoom: 1,
			photoList: [],
			photoThumbList: [],
			width: 0,
			navHalfNum: 0,
			navAllNum: 0,
			height: 0,
			rotate: 0,
		}
	},
	methods: {
		changeSlider(_index) {
			this.CarouseIndex = _index;
		},
		imgRotate(_id) {
			this.rotate++;
			let oDiv = document.getElementById(_id);
			oDiv.style.transform = 'rotate(' + (this.rotate * 90) + 'deg)';
			// $('#' + _id).rotate(90 * this.rotate);
		},
		imgZoomMax(_id) {
			this.nowImgZoom++;
			let oDiv = document.getElementById(_id);
			$('#' + _id).removeClass('maxWidth');
			oDiv.style.zoom = 100 * this.nowImgZoom + '%';
		},
		imgZoom(_id) {
			if (this.nowImgZoom < 1) return;
			let oDiv = document.getElementById(_id);
			if (this.nowImgZoom == 1) {
				$('#' + _id).addClass('maxWidth');
				oDiv.style.top = '0px';
				oDiv.style.left = '0px';
				oDiv.style.zoom = 100 * this.nowImgZoom + '%';
			} else {
				this.nowImgZoom--;
				$('#' + _id).removeClass('maxWidth');
				oDiv.style.zoom = 100 * this.nowImgZoom + '%';
			}
		},
		drag(_id) {
			let oDiv = document.getElementById(_id);
			let that = this;
			oDiv.onmousedown = function(ev) {
				ev.preventDefault();
				var oEvent = ev;
				var disX = oEvent.clientX - oDiv.offsetLeft;
				var disY = oEvent.clientY - oDiv.offsetTop;

				document.onmousemove = function(ev) {
					oEvent = ev;
					if (oEvent.clientX - disX <= 0 && oEvent.clientX - disX >= 0 - ((oDiv.width * that.nowImgZoom - that.width) / that.nowImgZoom)) {
						oDiv.style.left = oEvent.clientX - disX + "px";
					}
					if (that.nowImgZoom == 0) {
						oDiv.style.top = oEvent.clientY - disY + "px";
					} else if (oEvent.clientY - disY <= 0 && oEvent.clientY - disY >= 0 - ((oDiv.height * that.nowImgZoom - that.height) / that.nowImgZoom)) {
						oDiv.style.top = oEvent.clientY - disY + "px";
					}
				}
				document.onmouseup = function() {
					document.onmousemove = null;
					document.onmouseup = null;
				}

			}
		},
		start() {
			this.$nextTick(() => {
				console.log($(this.$el).children('.alubms')[0].offsetHeight - 72);
				$('.slide-for-each').height($(this.$el).children('.alubms')[0].offsetHeight - 72);
				for (let i = 0; i < $(this.$el).find(".zoomBtn").length; i++) {
					$($(this.$el).find(".zoomBtn")[i]).css("top", $('.slide-for-each').height() - 36 + 'px');
				}

				this.CarouseIndex = 0;
				this.nowImgZoom = 1;
				this.navAllNum = this.photoThumbList.length;
				this.width = $('.alubms').width();
				this.height = $('.slide-for-each').height();
				this.CarouselImgWidth = $('.slide-for-each').width();
				this.CarouselThumbImgWidth = $('.slider-nav-img').width() + 10;
				this.navHalfNum = this.width * 0.88 / 84 / 2;
			});
		}
	},
	mounted() {

	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.photoAlbum {
	font-size: 14px;
	color: #475669;
	height: 100%;
	width: 100%;
	.alubms {
		position: relative;
		height: 100%;
		width: 100%;
		white-space: nowrap;
		font-size: 0;
		overflow: hidden;
		.slider-for {
			width: 100%;
			white-space: nowrap;
			position: relative;
			@include vendor-prefixes(transition, all 0.5s ease-in);
			.slide-for-each {
				width: 100%; // height: 100%;
				cursor: move;
				@include inline-block(middle);
				position: relative;
				overflow: hidden;
				.slick-for-img {
					zoom: 100%;
					position: absolute;
				}
				.maxWidth {
					max-width: 100%;
					top: 0px;
					left: 0px;
				}
			}
		}
		.zoomBtn {
			position: absolute;
			right: 50px;
			top: 566px;
			cursor: pointer;
			color: #fff;
			font-size: 20px;
		}
		.zoomBtnMax {
			right: 20px;
		}
		.zoomBtnRatate {
			right: 80px;
		}
		.navContent {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #000000;
			color: #fff;
			.before {
				width: 6%;
				height: 100%;
				float: left;
				font-size: 40px;
				line-height: 72px;
				cursor: pointer;
			}
			.after {
				float: right;
			}
			.navSlider {
				width: 88%;
				height: 100%;
				float: left;
				overflow: hidden;
				.slider-nav {
					width: 100%;
					position: relative;
					@include vendor-prefixes(transition, all 0.5s ease-in);
					.slider-nav-each {
						padding: 0px 5px;
						cursor: pointer;
						width: 72px;
						height: 72px;
						@include inline-block(middle);
						position: relative;
						overflow: hidden;
						.slider-nav-img {
							position: absolute;
							width: 72px;
							height: 100%;
							border: 1px solid #475669;
							box-sizing: border-box;
						}
						.active {
							width: 72px;
							height: 100%;
							border: 1px solid #FF4949;
							box-sizing: border-box;
						}
					}
				}
			}
		}
	}
	.close {
		position: absolute;
		top: 30px;
		right: 30px;
		color: #fff;
		font-size: 26px;
		cursor: pointer;
	}
}

</style>
